<template>
    <el-container class="boxmain" v-if="userinfo">
        <el-header class="el-header" >
            <Head :userinfo="userinfo"/>
        </el-header>
        <el-container class="boxsubmain">
            <el-aside class="el-aside" width="200px">
                <SideMenu :userinfo="userinfo"/>
            </el-aside>
            <el-container>
                <el-main>
                    <router-view></router-view>
                </el-main>
               <el-footer class="el-footer">
                   <Foot/>
               </el-footer>
            </el-container>
        </el-container>
    </el-container>
</template>


<script>
import Head from "@/components/head.vue"
import Foot from "@/components/foot.vue"
import SideMenu from "@/components/sidemenu.vue"
import {getuserinfo} from "@/api"

export default {
    components:{
        Head,
        Foot,
        SideMenu
    },
    data(){
        return {
            userinfo:{}
        }
    },
    mounted(){
        getuserinfo()
        .then(res=>{
            if(res.type){
                this.userinfo = res.result
                sessionStorage.setItem("roleid",res.result.roleid)//记录当前权限
            }
        })
        
    }
}
</script>



<style lang="scss" scoped>
.el-header{
    background: rgb(42, 52, 61);
    height: 80px;
}
.el-footer{
    background: rgb(42, 52, 61);
    height: 80px;
}
.boxmain{
    width: 100%;
    height: 100%;
}
.el-aside{
background: rgb(84, 92, 100);
}

</style>